<template>
	<view v-if="messageList">
		
		
		<view class="notice-content"   v-for="(item,i) in messageList" :key="i" @click="clickStatus(item,1)" >
			<view class="info_comment_image">
				<image class="info_comment_imagedetail" :src="item.image||defaultPic"></image>
			</view>
			<view class="time-content">
				<!-- 标题和是否读取 -->
				
				<view class="title-state">
					
					<view class="title" >
						{{item.reviewerName}}
					</view>
					
					<view class="state" v-if="item.isRead==0"></view>
				</view>
				
				<view class="time">
					在{{item.createTime}}回复了您
				</view>
				<view class="content">
					{{item.reviewContent}}
				</view>
				<view class="src-and-content">
					<view class="src">
						
					</view>
					<view class="src-content">
						{{item.content}}
					</view>
				</view>
			</view>
			<view class="content-image">
				<image class="info_comment_imagedetail" :src="item.imgUrl||defaultPic"></image>
			</view>
			
		</view>
		
	</view>
	<view class="no-notice" v-else>
		<view class="no-notice-notice">
			<text class="centered-text">没有新通知了</text>
			
		</view>
		
	</view>
	<view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="否" confirmText="是" title="注意:" content="标记全部已读？" @confirm="dialogConfirm(1)" @close="dialogClose">
			</uni-popup-dialog>
		</uni-popup>
	</view>
	<view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDeleteDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="否" confirmText="是" title="注意:" content="删除全部？" @confirm="dialogConfirm(2)" @close="dialogClose">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import { mapMutations,mapState } from 'vuex'
	export default {
		data() {
			return {
				isloading: false,
				// 请求参数对象
				queryObj: {
					// 页码值
					pageNo: 1,
					// 每页显示多少条数据
					pageSize: 7
				},
				messageList: [],
				msgType: 'msgType',
				defaultPic:
				'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',	
			}
		},
		computed: {
		  ...mapState('m_user', ['userinfo']),
		  ...mapState('m_user', ['userId']),
		  ...mapState('m_dept', ['deptId']),
		  ...mapState('m_dept', ['dept'])
		},
		onLoad() {
			//获取消息的数据
			 this.getMessageList()
		
		},
		methods: {
			onLongPress(index,item) {
			      uni.showActionSheet({
			        itemList: ['删除'],
			        success: (res) => {
			          if (res.tapIndex === 0) {
			            this.messageList.splice(index, 1); // 删除操作
						this.clickStatus(item,2);
			          }
			        },
			        fail: (err) => {
			          console.log('显示操作菜单失败：', err);
			        }
			      });
			},
			dialogToggle(type,state) {
				this.msgType = type
				if(state==1){
					this.$refs.alertDialog.open()
				}else{
					this.$refs.alertDeleteDialog.open()
				}
				
			},
			
			
			dialogConfirm(status) {
				this.readAllOrDelete(status)
				//this.$refs.message.open()
			},
			
			dialogClose() {
			},
			
			//获取消息列表
			async getMessageList(){
				// ** 打开节流阀
				this.isloading = true
				await uni.request({
				    url: uni.$http.baseUrl+'/api/hotspot/getUnReadReview',
				    data: {
						userId:this.userId,
				       // 页码值
				       pageNo: this.queryObj.pageNo,
				       // 每页显示多少条数据
				       pageSize: this.queryObj.pageSize,
				    },
					method: 'POST',
				    header: {
				          // "Content-Type": "application/json",
				          "Content-Type": "application/x-www-form-urlencoded"
				        },
				    success: (res) => {
						// ** 关闭节流阀
						this.isloading = false
						this.messageList=[...this.messageList, ...res.data.data] 
				    },
					fail: (res) =>{
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});
			},
			//单条已读
			async clickStatus(item,value){
				
				await uni.request({
				    url: uni.$http.baseUrl+'/api/hotspot/updateReviewRead',
				    data: {
						//id
						reviewId: item.reviewId,
						
						
				    },
					method: 'POST',
				    header: {
				          // "Content-Type": "application/json",
				          "Content-Type": "application/x-www-form-urlencoded"
				    },
				    success: (res) => {
						//红色点点不显示
						item.isRead=1
						//连接到对应热点页面
						uni.navigateTo({
						  url: '/subpkg/association_trends/association_trends?id=' +item.id+'&name='+item.createUserName+'&imgUrl='+item.littleImage +'&createUser='+item.createUser+'&title=热点详情'
						});
				    },
					fail: (res) =>{
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});
			},
		},
		
		// 触底的事件
		onReachBottom() {
			  // 判断是否还有下一页数据
			  if (this.messageList.length < this.queryObj.pageSize*this.queryObj.pageNo)
			  return uni.$showMsg('数据加载完毕！')
			  // 判断是否正在请求其它数据，如果是，则不发起额外的请求
			  if (this.isloading) return
			   // 让页码值自增 +1
			   this.queryObj.pageNo += 1
			   // 重新获取列表数据
			   this.getMessageList()
			
		},
	}
</script>

<style lang="scss">
	@import "@/static/iconfont.css";
	.delete-read{
		display: flex;
		justify-content: space-between;
		background-color: white;
		font-size: 16px;
		padding-top: 5px;
		.all-delete{
			display: flex;
			padding-right: 10px;
			padding-bottom: 5px;
		}
		.all-read{
			padding-right: 10px;
			padding-bottom: 5px;
			
		}
	}
	
	.no-notice-notice{
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		height: 100px; /* 容器高度，根据需要设置 */
	}
	.notice-content{
		background-color: white;
		border-radius: 10px;
		margin-top: 10px;
		padding: 10px;
		display: flex;
		.info_comment_image {
			.info_comment_imagedetail {
				width: 30px;
				/* 宽度应该和高度相同 */
				height: 30px;
				border-radius: 50%;
				/* 圆形效果 */
			}
		}
		.time-content{
			width: 100%;
			display: flex;
			flex-direction: column;
			.title-state{
				display: flex;
				justify-content: space-between;
				
				.title{
					//标题
					font-size: 15px;
				}
				.state{
					background-color: red;
					width: 5px;
					height: 5px;
					border-radius: 10px;
				}
				
			}
			
			.time{
				font-size: 12px;
				padding : 3px;
				color: grey;
			}
			.content{
				font-size: 14px;
				padding: 5px;
			}
			.src-and-content{
				margin-top: 5px;
				display: flex;
				.src{
					background-color: #d6d6d6;
					width: 4px;
					margin-right: 4px;
				}
				.src-content{
					width: 200px; /* 定义容器宽度 */
					  white-space: nowrap; /* 文本不换行 */
					  overflow: hidden; /* 超出部分隐藏 */
					  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
				}
			}
		}
		
	}
	.content-image{
		height: 80px;
		width: 100px;
		.info_comment_imagedetail{
			height: 100%;
			width: 100%;
		}
	}
	

</style>
